 /*
 * 可复用的公有布局
 */

 // flex布局
 .df {
     display: flex;
 }

 .fd {
     flex-direction: column;
 }

 .jcnter {
     justify-content: center;
 }

 .aitems {
     align-items: center;
 }

 .flex {
     flex: 1;
 }

 // 定位
 .abs {
     position: absolute;
 }

 .rel {
     position: relative;
 }

 // 公用的样式
 .reg-txt {
     top: 30px;
     right: 20px;

     a {
         color: #fff;
     }
 }

 .form {
     margin-top: 40px;

     .items {
         width: 100%;
         height: 50px;
         line-height: 50px;
         margin-bottom: 20px;
         background-color: rgba(255, 255, 255, .5);
         border-radius: 25px;
         overflow: hidden;

         input {
             width: 100%;
             height: 50px;
             background-color: transparent;
             text-indent: 15px;
             color: #ccc;

             &::placeholder {
                 color: #f6f6f6;
             }
         }
     }


     .vcode {
         width: 100px;
         height: 50px;

         margin-left: 20px;
     }

     button {
         width: 100%;
         height: 50px;
         border-radius: 25px;
         background-color: rgba(99, 255, 167, .5);
         color: #fff;
     }

     .fottxt {
         right: 50%;
         transform: translate(50%);
         bottom: -38%;
     }
 }

 // 公用页脚
 footer {
     ul {
         border-top: 1px solid #ccc;
         box-shadow: 0px -1px 14px #edeaea;

         li {
             flex: 1;

             a {
                 display: flex;
                 flex-direction: column;
                 color: #8a8a8a;
                 padding: 10px 0;

                 .iconfont {
                     font-size: 30px;
                 }
             }

             .active {
                 color: #4294ff;
             }
         }
     }
 }